<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>event bus 练习</title>
    <link rel="stylesheet" href="../lib/bulma.min.css">
    <style>
       .completed-bg{
           background-color: #ccc;
       }
       .completed-text{
           text-decoration: line-through;
       }
    </style>
</head>
<body>
    <div id="app">
        <todo-header></todo-header>
        <todo-input @add="addTodoItem"></todo-input>
        <todo-list v-bind:list="todos"></todo-list>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
    //创建一个全局的空vue实例
    const bus=new Vue()

    //定义组件 TodoHeader
    const todoHeaderoptions={
        template:`
        <section class="hero is-primary">
          <div class="hero-body">
            <p class="title">
              待办事项列表
            </p>
            <p class="subtitle">
               今日事今日毕！加油！
            </p>
        </div>
        </section>
        `
    }
    
    //定义组件TodoInput
    const todoInputOptions={
        template:`
        <div class="field is-grouped container"
             :style="{marginTop:'12px'}">
             <p class="control is-expanded">
             <input
               class="input"
               type="text"
               v-model.trim="inputValue"
               placeholder="请输入新待办事项"
               ref="inputRef"
               @keydown.enter="handleAdd"
            >
            </p>
            <p class="control">
              <a href="/" class="button is-primary"
                @click="handleAdd">
                添加
              </a>
            </p>
        </div>
        `,
        data(){//组件中的data必须是函数的结构，在函数体内部返回普通对象
        return{
            inputValue:''
        }
     },

     methods:{//方法
         handleAdd(e){//处理添加动作
           e.preventDefault()//阻止超级链接跳转

           this.$refs.inputRef.focus()//输入框自动获得焦点

           if(!this.inputValue){
               return  //判断如果文本款中为输入数据，则结束添加
           }

           this.$emit('add',this.inputValue)//触发在父组件中绑定的自定义add事件，在触发事件执行时，传递文本框中获取到的输入数据

           this.inputValue='' //清空输入框

         }
     }
    }

    //定义组件TodoItem
    const todoItemOptions={
        template:`
        <div class="card">
          <div class="card-content"
            :class="{'completed-text': todo.completed, 'completed-bg': todo.completed}">
          
            <div class="content">
              {{ todo.id }} - {{ todo.title }} - {{ todo.completed }}
            </div>
          </div>
          <footer class="card-footer">
           <a href="#" class="card-footer-item" @click="handleToggle">
          标记为{{todo.completed ? '未' : '已'}}完成
          </a>
           <a href="#" class="card-footer-item" @click="handleRemove">删除</a>
          </footer>
        </div>
        `,
    }

    
    
    </script>
</body>
</html>